<template>
  <div class="tree">
    <el-row :gutter="12" style="padding-top: 20px;margin-right: 5px;margin-left: 5px">
      <el-col :span="12">
        <el-button-group style="margin-bottom: 20px">
          <el-button v-if="buttons.moduleAdd" type="primary" size="medium " @click="handlerAclModuleAdd">新增权限系统
          </el-button>
          <el-button v-if="buttons.edit" type="primary" size="medium " icon="el-icon-edit" @click="handlerAclModify">
            编辑
          </el-button>
          <el-button
            v-if="buttons.add"
            type="primary"
            size="medium "
            icon="el-icon-circle-plus-outline"
            @click="handlerAclAdd"
          >新增
          </el-button>
          <el-button
            v-if="buttons.add"
            type="primary"
            size="medium "
            :loading="showComponents.aclsToRedis"
            @click="handlerAclsToRedis"
          >一键同步权限到Redis
          </el-button>
        </el-button-group>
        <el-tree
          ref="tree"
          :data="dataTree"
          node-key="idStr"
          :show-checkbox="false"
          :highlight-current="true"
          :expand-on-click-node="true"
          :default-expanded-keys="defaultExpandedKeys"
          :default-checked-keys="defaultExpandedKeys"
          :props="defaultProps"
          @node-click="getCurrentKey()"
        />
      </el-col>
      <el-col :span="12">
        <acl-detail v-show="showComponents.detail" :acl-detail-to-child="aclDetailToChild" />
        <acl-module-add
          v-show="showComponents.aclSysAdd"
          :acl-module-add-to-child="aclModuleAddToChild"
          @aclModuleAddToFather="aclModuleAddToFather"
        />
        <acl-modify
          v-show="showComponents.aclModify"
          :acl-modify-to-child="aclModifyToChild"
          @aclModifyToFather="aclModifyToFather"
        />
        <acl-add v-show="showComponents.aclAdd" :acl-add-to-child="aclAddToChild" @aclAddToFather="aclAddToFather" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { roleHaveAclTree, detail, aclsToRedis } from '@/api/momo/SysAcl'
import { success } from '@/utils/tip'
import AclDetail from './component/AclDetail'
import AclModuleAdd from './component/AclModuleAdd'
import AclModify from './component/AclModify'
import AclAdd from './component/AclAdd'

export default {
  name: 'AclTree',
  components: {
    AclDetail,
    AclModify,
    AclAdd,
    AclModuleAdd
  },
  data() {
    return {
      defaultExpandedKeys: [],
      dataTree: [],
      // 父部门名称的下拉框集合
      fatherAclList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      aclDetailToChild: {
        aclParentSelect: [],
        aclDetail: {}
      },
      aclModifyToChild: {},
      aclAddToChild: {},
      aclModuleAddToChild: {},
      showComponents: {
        detail: false,
        aclSysAdd: false,
        aclAdd: false,
        aclsToRedis: false,
        aclModify: false
      },
      buttons: {
        moduleAdd: false,
        add: false,
        edit: false,
        detail: false
      }
    }
  },
  created() {
    this.loadRoleHaveAclTree()
    if (this.$route.meta.buttons) {
      this.buttons = Object.assign(this.buttons, this.$route.meta.buttons)
    }
  },
  methods: {
    handlerAclModify() {
      const currentClickAcl = this.$refs.tree.getCurrentNode()
      if (currentClickAcl == null) {
        return
      }
      detail(currentClickAcl).then(res => {
        res = res.data
        const data = {}
        data.res = res
        const currentAclJson = JSON.parse(JSON.stringify(this.dataTree))
        this.fatherAclList = []
        this.recursiveRenderAclSelect(currentAclJson, 1, currentClickAcl.idStr, currentClickAcl.sysAclLevel)
        data.fatherAclList = this.fatherAclList
        this.aclModifyToChild = data
        this.handlerShowComponents('aclModify')
      })
    },
    handlerAclsToRedis() {
      this.showComponents.aclsToRedis = true
      aclsToRedis().then(res => {
        res = res.data
        success(res)
      }).catch(errored => {
        this.showComponents.aclsToRedis = false
      }).finally(() => {
        this.showComponents.aclsToRedis = false
      })
    },
    handlerAclAdd() {
      const currentClickAcl = this.$refs.tree.getCurrentNode()
      if (currentClickAcl == null) {
        return
      }
      this.aclModuleAddToChild.random = '' + Math.random()
      const data = {}
      data.currentClickAcl = JSON.parse(JSON.stringify(currentClickAcl))
      const currentAclJson = JSON.parse(JSON.stringify(this.dataTree))
      this.fatherAclList = []
      this.recursiveRenderAclSelect(currentAclJson, 1, currentClickAcl.id, currentClickAcl.sysAclLevel)
      data.fatherAclList = this.fatherAclList
      this.aclAddToChild = data
      this.handlerShowComponents('aclAdd')
    },
    handlerAclModuleAdd() {
      this.aclModuleAddToChild.random = '' + Math.random()
      this.handlerShowComponents('aclSysAdd')
    },
    aclAddToFather() {
      this.loadRoleHaveAclTree()
    },
    aclModifyToFather() {
      this.loadRoleHaveAclTree()
    },
    aclModuleAddToFather() {
      this.loadRoleHaveAclTree()
    },
    loadRoleHaveAclTree() {
      roleHaveAclTree().then(res => {
        res = res.data
        if (res !== null && res !== undefined) {
          this.dataTree = res.aclLevelRes
          this.defaultExpandedKeys = res.defaultexpandedKeys
        }
      })
    },
    getCurrentKey() {
      if (!this.buttons.detail) {
        return false
      }
      const currentClickAcl = this.$refs.tree.getCurrentNode()
      const currentAclJson = JSON.parse(JSON.stringify(this.dataTree))
      this.fatherAclList = []
      this.recursiveRenderAclSelect(currentAclJson, 1, currentClickAcl.id, currentClickAcl.sysAclLevel)
      this.handlerShowComponents('detail')
      const aclDetail = {}
      aclDetail.aclDetail = currentClickAcl
      aclDetail.aclParentSelect = this.fatherAclList
      this.aclDetailToChild = aclDetail
    },
    handlerShowComponents(component) {
      this.showComponents.detail = false
      this.showComponents.aclSysAdd = false
      this.showComponents.aclModify = false
      this.showComponents.aclAdd = false
      this.showComponents.aclsToRedis = false
      if (component === 'detail') {
        this.showComponents.detail = true
      } else if (component === 'aclSysAdd') {
        this.showComponents.aclSysAdd = true
      } else if (component === 'aclModify') {
        this.showComponents.aclModify = true
      } else if (component === 'aclAdd') {
        this.showComponents.aclAdd = true
      } else if (component === 'aclsToRedis') {
        this.showComponents.aclsToRedis = true
      } else {
        this.showComponents.detail = false
        this.showComponents.moduleModify = false
        this.showComponents.aclModify = false
        this.showComponents.aclAdd = false
      }
    },
    recursiveRenderAclSelect(aclList, level, idStr, aclLevel) {
      level = level | 0
      if (aclList && aclList.length > 0) {
        aclList.forEach(acl => {
          var blank = ''
          if (level > 1) {
            for (var j = 3; j <= level; j++) {
              blank += '...'
            }
            blank += '∟'
          }
          if (acl.sysAclLevel.indexOf(aclLevel) === -1 && acl.sysAclType !== 3 || acl.sysAclType !== 2) {
            acl.sysAclName = blank + acl.sysAclName
            this.fatherAclList.push(acl)
          }
          if (acl.children && acl.children.length > 0) {
            this.recursiveRenderAclSelect(acl.children, level + 1, idStr, aclLevel)
          }
        })
      }
    }
  }
}
</script>

<style>
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .tree {
    background-color: #fff;
    margin-top: 2px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5px;
  }
</style>
